<script setup lang="ts">
import { watch, ref, onUnmounted } from "vue";
import leftCompWrapper from "../common/leftCompWrapper.vue";
import { onMounted } from "vue";

import { useRouter } from "vue-router";
import { PxMessage } from "px-ui";
const router = useRouter();
import useWs from "@/hooks/useWs";
defineOptions({
  name: "tableAlert"
});
const isCollapsed = ref(false);

const props = withDefaults(
  defineProps<{
    propValue?: {
      tableData: Array<any>;
      title?: string;
      collapsed?: boolean;
      iconName?: string;
      needAlert?: boolean;
      maxHeight?: string;
      noBorder?: boolean;
      rowKey?: string;
      tableColumns?: Array<any>;
    };
  }>(),
  {
    propValue: () => ({
      tableData: [],
      title: "",
      collapsed: false,
      iconName: "alert",
      needAlert: false,
      maxHeight: "224px",
      noBorder: true,
      rowKey: "id",
      tableColumns: []
    })
  }
);
const realTabelData = ref([]);

watch(
  () => props.propValue?.tableData,
  newVal => {
    if (newVal && Array.isArray(newVal) === true) {
      let map = {};
      let special = false;
      newVal.forEach(item => {
        const { title, value } = item;
        if (title) {
          let [name, flag] = title.split("-");
          if (!map[name]) {
            map[name] = { name };
          }
          if (flag == "入口") {
            map[name] = { ...map[name], input: value };
            special = true;
          } else {
            map[name] = { ...map[name], output: value };
          }
        }
      });
      if (special) {
        realTabelData.value = Object.values(map);
      } else {
        realTabelData.value = newVal;
      }
    }
  },
  {
    immediate: true,
    deep: true
  }
);
</script>

<template>
  <leftCompWrapper v-model="isCollapsed" :title="propValue.title" :icon-name="propValue.iconName" stripe :has-collapsed="propValue.collapsed">
    <div v-if="isCollapsed || !propValue.collapsed" class="list-warpper">
      <px-table
        ref="tableRef"
        :data="realTabelData"
        :max-height="propValue.maxHeight ? propValue.maxHeight : '400px'"
        class="inspect-table"
        size="small"
        :border="propValue.noBorder ? false : true"
        :row-key="propValue.rowKey ? propValue.rowKey : 'id'"
      >
        <template v-for="(item, index) in propValue.tableColumns" :key="index">
          <px-table-column
            v-if="item.prop === 'index'"
            type="index"
            :align="item.align ? item.align : 'center'"
            :min-width="item.minWidth"
            :fixed="item.fixed ? item.fixed : 'left'"
            :label="item.label ? item.label : '序号'"
          />
          <px-table-column
            v-else
            :label="item.label"
            :min-width="item.minWidth"
            :align="item.align ? item.align : 'left'"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :fixed="item.fixed"
          >
            <template v-if="item.customFun" #default="scope">{{ item.customFun(scope.row[item.prop]) }}</template>
            <template v-else #default="scope">{{
              scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
            }}</template>
          </px-table-column>
        </template>
      </px-table>
    </div>
  </leftCompWrapper>
</template>

<style lang="scss" scoped>
$listIcon: list-icon-;
$itemIcon: item-icon-;
$itemType: list-item-color-;

.list-warpper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
</style>
